<script type="text/javascript">
  function loading_image(node_id)
  {
    img = document.createElement("img");    
    img.setAttribute("src", "/images/small_shrimp_loading.gif");
    img.setAttribute("alt", "...loading...");
    img.className = "map_loading_img";
    node = document.getElementById(node_id);
    detach_children(node);
    node.appendChild(img);
  }

  function detach_children(node)
  {
    var child = node.childNodes[0];
    while(child != null)
    {
      var nextChild = child.nextSibling;
      node.removeChild(child);
      child = nextChild;
    }
  }

  function choose_row(row)
  {
    old_choice = document.getElementById("chosen_concept");
    if(old_choice != null) 
    {
      old_choice.id = "";
    }

    row.id = "chosen_concept"; //highlight the selection


    //now submit the forms..
    //get the concept_id from the clicked row
    concept_id_node = findNodeWithName(row, "concept_id");

    //find the form for retrieving the concept attributes and submit it
    concept_id_field = document.getElementById("concept_attributes_id");
    concept_id_field.value = concept_id_node.value
    lookup_form = document.getElementById("concept_attributes_form");
    lookup_form.onsubmit();

    //find the form for retrieving the concept mappings and submit it
    concept_id_field = document.getElementById("concept_mappings_id");
    concept_id_field.value = concept_id_node.value
    lookup_form = document.getElementById("concept_mappings_form");
    lookup_form.onsubmit();
  }

  function findNodeWithName(node, name)
  {
    if(node != null && (name != null && name != ""))
    {
      if(node.name == name)
        return node;
      else
      {
        if(node.childNodes.length > 0)
        {
          result = null;
          for(var i = 0; i < node.childNodes.length; i++)
          {
            result = findNodeWithName(node.childNodes[i], name);
            if(result != null)
              return result
          }

          return null;
        }
      }
    }
  }

  function map_to_concept(conceptId)
  {
    id2Field = document.getElementById("concept_id_2");
    id2Field.value = conceptId

    mapForm = document.getElementById("map_concepts_form");
    mapForm.onsubmit();
  }

  function closeModal()
  {
    $('<%= $MODAL_CONTAINER %>').fade({ duration: 0.5 })
    $('<%= $MODAL_BOX %>').remove();
  }
</script>
<div id="<%= $MODAL_CONTAINER %>" style="display: none;"></div>
<div class="yui-gf" id="mapper">
  <div class="yui-u first">
    <div class="map_box_title">Site Fragment</div>
    <div class="map_border">
      <% form_remote_tag(:url => {:controller => "mapper", :action => "choose_fragment"}, :loading => "loading_image('local_concepts');") do %>
        <%= select("fragment", "id", @fragments.collect {|f| [ f.name, f.id ] }, { :include_blank => true }, :onchange => "this.form.onsubmit();" ) %>
        <span id="fragment_stats"></span>
      <% end %>      
      <div id="site_frag_paginate_box">
      </div>
      <div id="map_ontology_list">
        <div id="local_concepts">
          <span class="info">No fragment selected.</span>
        </div>

        <% form_remote_tag(:url => {:controller => 'concept', :action => 'lookup'}, :loading => "loading_image('concept_details');loading_image('concept_mappings');", :html => {:id => "concept_attributes_form"}) do %>
            <%= hidden_field_tag "concept_id", "", {:id => "concept_attributes_id"} %>
        <% end %>
      </div>
    </div>
  </div>      
  <div class="yui-g">
    <div class="yui-u first oneThirdWidth" style="width: 32%;"> <%# Inline style is a YUI Hack - nesting grids other than yui-g is broken %>
      <div class="map_box_title">Concept Details</div>
      <div id="map_concept" class="map_border">        
        <div id="concept_details">          
          <span class="info">No concept selected.</span>
        </div>
      </div>
    </div>
    <div class="yui-u twoThirdsWidth" style="width: 66%;"> <%# Inline style is a YUI Hack - nesting grids other than yui-g is broken %>
      <div class="map_box_title">Site Concept &rarr; Core Concept mappings</div>
      <div id="map_mappings" class="map_border">        
        <div id="concept_mappings">
          <span class="info">No concept selected.</span>
        </div>
      </div>
    </div>
    <div style="clear: both; height: 18px;"></div>
    <div class="map_box_title">Core Fragment</div>
    <div id="map_core_search" class="map_border">      
      <div id="core_ontology">
        <div id="search_form">
          <% form_remote_tag(:url => {:controller => 'fragments', :action => 'search', :sort_by => "name"}, :update => "search_results", :loading => "loading_image('search_results');") do %>
            <div id="search_site_fields">
              <%= hidden_field_tag "site_fragment_id", "" %>
            </div>
            <div id="search_selected_concept_box">
              <%= hidden_field_tag "search_selected_concept_id", "" %>
            </div>
            Search:
            <span id="search_text_field">
              <%= text_field_tag "search_text" %>
            </span>
            <%= submit_tag "Search" %>
            <span>
              <%= check_box_tag "include_attrs" %>
              <%= label_tag "include_attrs", "Include attributes" %>
            </span>            
          <% end %>                    
        </div>
        <% form_remote_tag :url => url_for(:controller => "concepts", :action => "new_map"), :html => {:id => "map_concepts_form"} do %>
          <div id="concept_id_1_box">
            <%= hidden_field_tag "concept_id_1", "" %>
          </div>
          <%= hidden_field_tag "concept_id_2", "" %>
          <div id="search_results"></div>
        <% end %>
      </div>
    </div>
  </div>
</div>
